import React from 'react';
import cx from 'classnames'
import style from './style.field';

//@todo 变成HOCs 形式

class FormContainer extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'FormContainer';
  }
  render() {
    const {
      active,
      error,
      disabled,
      width,
      bubbleList = [],
      className,
      lineStyle,
    } = this.props;
    const renderList = bubbleList.map( (v, i) => {
      return !v ? null :(
        <span className={style['field-bubble']} key={i}>{v}</span>
      )
    });
    let inputStyle = {};
    if(width) {
      inputStyle.width = typeof width === 'number' ? width + 'px' : width;
    }
    return (
      <div 
        data-role={'fieldBox'}
        className={cx({
          [style['field-box']]: !lineStyle,
          [style['field-box-line']]: !!lineStyle,
          [style['field-box-active']]: !!active,
          [style['field-box-error']]: !!error,
        })}
      >
        <div data-role={'fieldInputBox'} className={cx({
          [style['field-input']]: true,
          [style['field-disabled']]: disabled,
          [className]: !!className,
        })} style={inputStyle}>
          {this.props.children}
        </div>
        {renderList}
      </div>
    );
  }
}

export default FormContainer;
